iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0
自我挑戰組

Web Franework -SASS/SCSS系列 第 4

Day 4 - 繼承、Mixin

  • 分享至 

  • xImage
  •  

#繼承

繼承是SASS和SCSS提供的一個功能,他的概念是讓一個選擇器繼承另一個選擇器的樣式,不僅可以解決樣式規則重複撰寫的問題,同時也使我們可以更方便的維護代碼。
繼承的使用介紹:
使用@extend來繼承其他選擇器的樣式,不過雖然繼承可以減少重複的撰寫,但過度的使用可能會讓樣式變得過於複雜,因此應保持在合理的層次結構內,避免造成自己的困擾。

#Mixin
這是一個和繼承有點類似的功能,不同的是,Mixin可以接受參數,使樣式變得更加靈活,並且可以針對不同的場景重複使用相同的樣式邏輯。
Mixin的使用介紹:
使用@mixin來定義一組可以重複使用的樣式,並且可以通過@include來調用。

今天的繼承和Mixin的解析就到這邊,歡迎糾正錯誤。
加油!!!


上一篇
Day 3 - 變數、嵌套
下一篇
Day 5 - SASS進階應用1
系列文
Web Franework -SASS/SCSS26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言